<template>
  <div class="home-container">
    <div class="home-content">
      <div class="home-content-banner">
        <!-- 顶部导航栏 -->
        <div class="nav-bar">
          <!-- 左侧：图标 + 标题 -->
          <div class="nav-left">
            <img src="@/assets/three.svg" alt="菜单" class="nav-icon" />
            <span class="nav-title">百货优选</span>
          </div>
          <!-- 右侧：用户和购物车图标 -->
          <div class="nav-right">
            <router-link to="/user">
              <img src="@/assets/person1.svg" alt="用户" class="nav-icon" />
            </router-link>
            <router-link to="/cart">
              <img src="@/assets/shopcar.svg" alt="购物车" class="nav-icon" />
            </router-link>
          </div>
        </div>
      </div>
      <div class="search">
        <van-search
          v-model="searchValue"
          placeholder="搜索商品、品牌、品类"
          background="#ffffff"
          shape="round"
          class="custom-search"
          @focus="onFocus"
          @blur="onBlur"
          ref="searchRef"
        >
         <template #right-icon>
            <img src="@/assets/voice.svg" alt="voice" class="voice-icon">
        </template>
        </van-search>
      </div>
      <div class="carousel">
       <carousel-card v-if="carouselList.length" v-model:carouselList="carouselList"></carousel-card>
      </div>
    </div>
    <div class="home-footer">

    </div>
  </div>
</template>

<script setup name="Home">
import { HTTP_STATUS } from '@/constant/http';

let searchValue = ref('');
const searchRef = ref(null);
const { useHome } = $globalStore;
let carouselList = ref([]); // 轮播列表

const onFocus = ()=> {
    console.log('搜索框获得焦点');
    // 使用Vue3的方式设置边框颜色为红色
    if (searchRef.value) {
        const contentElement = searchRef.value.$el.querySelector('.van-search__content');
        if (contentElement) {
            contentElement.style.borderColor = '#ff0000';
            contentElement.style.borderWidth = '1px';
            contentElement.style.borderStyle = 'solid';
        }
    }
}

const onBlur = ()=> {
    console.log('搜索框失去焦点');
    // 使用Vue3的方式设置边框颜色为默认值
    if (searchRef.value) {
        const contentElement = searchRef.value.$el.querySelector('.van-search__content');
        if (contentElement) {
            contentElement.style.borderColor = '';
            contentElement.style.borderWidth = '';
            contentElement.style.borderStyle = '';
        }
    }
}

//获取轮播
const getCarousel = async () => {
	const res = await useHome.getCarousel();
	if (res?.code === HTTP_STATUS.SUCCESS) {
		carouselList.value = res?.data || [];
	}
};

// 组件挂载时调用获取轮播
onMounted(() => {
	getCarousel();
});  

</script>

<style scoped>
/* 设置 home-content-banner 高度为页面的 2% 左右 */
.home-content-banner {
  height: 2vh;
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background-color: #ffffff;
}

/* 导航栏容器 */
.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左侧部分 */
.nav-left {
  display: flex;
  align-items: center;
}

/* 右侧部分 */
.nav-right {
  display: flex;
  align-items: center;
}

/* 图标样式 */
.nav-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  cursor: pointer;
}

/* 标题文字样式 */
.nav-title {
  font-size: 26px;
  font-weight: 600;
  color: rgb(255 77 79 / var(--tw-text-opacity, 1));
}

/* 右侧图标间距 */
.nav-right .nav-icon {
  margin-right: 15px;
  margin-left: 0;
}

/* 搜索框容器样式 */
.search {
  padding: 15px;
  background-color: #f9fafb;
}

/* 自定义搜索框样式 */
.custom-search {
  width: 90%;
  margin: 0 auto;
  height: 40px;
}

:deep(.van-search) {
 background-color: #f9fafb !important;
}

/* 调整搜索框输入区域高度 */
:deep(.van-search__content) {
  height: 40px;
  background-color: #f3f4f6 !important;
}

:deep(.van-search__input) {
  height: 40px;
  font-size: 14px;
}

/* 语音图标样式 */
.voice-icon {
  cursor: pointer;
  width: 16px;
  height: 16px;
  padding-top: 10px;
  padding-right: 12px;
}
</style>